<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/recommendList.css">
    <script src="./assets/iconfont.js"></script>
</head>

<body>
    <div class="wrapper d-flex  flex-column">
        <header class="header">
            <a href="#home"> 推荐页</a>
        </header>
        <section id="app" class="content">
            <div class="w">
                <div class="recommend-header">
                    <a href="#home">首页</a>/
                    <span>推荐歌单页</span>
                </div>
                <div class="recommend-wrapper">
                    <!-- 此处为推荐页，内容主要包括两个部分：歌单介绍和歌单列表 -->
                    <div class="recommend-describe d-flex justify-content-start">
                        <!-- 歌单介绍 -->
                        <div class="recommend-describe-left">
                            <img src="https://th.bing.com/th/id/R7466240255fa48164e1d741fb8b29893?rik=qd9WWhLotZqIAg&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160906%2f3-160Z6154A8.jpg&ehk=T2cuZ%2fECZd2tvUCSXRgW2e2axgZ8c4rM2GQpotzo3Ec%3d&risl=&pid=ImgRaw"
                                alt="">
                        </div>
                        <div class="recommend-describe-right d-flex flex-column align-items-start">
                            <h4 class="recommend-describe-right-title single-text-omitted">
                                一旦热爱生活，生活就会教你治愈一切的魔法
                            </h4>
                            <div class="recommend-describe-right-creator d-flex">
                                <img class="avatar"
                                    src="https://th.bing.com/th/id/R7466240255fa48164e1d741fb8b29893?rik=qd9WWhLotZqIAg&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160906%2f3-160Z6154A8.jpg&ehk=T2cuZ%2fECZd2tvUCSXRgW2e2axgZ8c4rM2GQpotzo3Ec%3d&risl=&pid=ImgRaw"
                                    alt="">
                                <span class="creator">歌单创造者</span>
                                <span class="create-time">创建时间</span>
                            </div>
                            <div class="recommend-describe-right-add d-flex">
                                <span class="btn">播放全部</span><span class="add">+</span>
                            </div>
                            <div class="recommend-describe-right-info">
                                <div class="info">
                                    <span class="label">标签：</span>
                                    <span class="tag">华语</span> /
                                    <span class="tag">流行</span> /
                                    <span class="tag">治愈</span>
                                </div>
                                <div class="info">
                                    <span class="label">歌曲：</span>
                                    <span class="label-info">30</span>
                                    <span class="label">播放：</span>
                                    <span class="label-info">275万</span>
                                </div>
                                <div class="info">
                                    <span class="label">简介：</span>
                                    <span class="label-info">你本身也漂亮温柔可爱</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="recommend-list">
                        <!-- 歌单列表  -->
                        <h4 class="recommend-list-title">
                            歌曲列表
                        </h4>
                        <ul class="recommend-list-songlist-header d-flex justify-content-start">
                            <li class="songlist-header-name">歌曲</li>
                            <li class="songlist-header-author">歌手</li>
                            <li class="songlist-header-album">专辑</li>
                            <li class="songlist-header-time">时长</li>
                        </ul>
                        <ul class="recommend-list-songlist-body">
                            <li class="songlist-item odd d-flex justify-content-start">
                                <div class="songlist-number font-color">
                                    <span class="index">01</span>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shoucang"></use>
                                    </svg>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-xiazai"></use>
                                    </svg>
                                </div>
                                <div class="songlist-songname">
                                    清明雨上
                                </div>
                                <div class="songlist-artist font-color">
                                    许嵩
                                </div>
                                <div class="songlist-album font-color">
                                    清明雨上
                                </div>
                                <div class="songlist-time font-color">
                                    3：13
                                </div>
                            </li>
                            <li class="songlist-item even d-flex justify-content-start">
                                <div class="songlist-number font-color">
                                    <span class="index">02</span>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shoucang"></use>
                                    </svg>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-xiazai"></use>
                                    </svg>
                                </div>
                                <div class="songlist-songname">
                                    清明雨上
                                </div>
                                <div class="songlist-artist font-color">
                                    许嵩
                                </div>
                                <div class="songlist-album font-color">
                                    清明雨上
                                </div>
                                <div class="songlist-time font-color">
                                    3：13
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <section class="player-control d-flex justify-content-start ">
            <div class="player-control-songinfo d-flex justify-content-start">
                <div class="img ">
                    <img src="https://th.bing.com/th/id/R7466240255fa48164e1d741fb8b29893?rik=qd9WWhLotZqIAg&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160906%2f3-160Z6154A8.jpg&ehk=T2cuZ%2fECZd2tvUCSXRgW2e2axgZ8c4rM2GQpotzo3Ec%3d&risl=&pid=ImgRaw"
                        alt="">
                </div>
                <div class="songinfo d-flex flex-column align-items-start">
                    <span class="songname">歌曲一</span>
                    <span class="single-text-omitted singer">歌手2323232323232</span>
                </div>
            </div>
            <div class="player-control-unit d-flex justify-content-between">
                <div class="control">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangyiqu"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiayiqu"></use>
                    </svg>
                </div>
                <div class="d-flex justify-content-between">
                    <div class="song-progress d-flex justify-content-between">
                        <span class="current-time">00:00</span>
                        <div class="progress" id='progress-bar'>
                            <div class="progress-bar"></div>
                            <div class="progress-dot"></div>
                        </div>
                        <span class="total-time">00:00</span>
                    </div>
                    <div class="volume d-flex">
                        <svg class="icon volume-icon" aria-hidden="true">
                            <use xlink:href="#icon-yinliang"></use>
                        </svg>
                        <div class="progress" id='volume-bar'>
                            <div class="progress-bar"></div>
                            <div class="progress-dot"></div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiaoxunhuan"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofangliebiao"></use>
                    </svg>
                </div>
            </div>
        </section>
    </div>

</body>

</html>